<template>
    <div class="plist_list">
        <app-header :title="title" style="position: sticky; top: 50px; z-index: 3;" />
        <div class="cover">
            <img v-lazy="createImageUrl(coverImage)"/>
        </div>
        <van-list class="list">
            <song-item
                v-for="(item, index) in list"
                :key="item"
                :hash="item.hash"
                class="item"
            >
                <template #title>
                    <div class="title">
                        <van-badge class="badge" :content="index+1" />
                        {{item.filename}}
                    </div>
                </template>
            </song-item>
        </van-list>
    </div>
</template>

<script>
import AppHeader from 'Components/AppHeader'
import SongItem from 'Components/SongItem'
import { ref, onBeforeMount } from 'vue'
import { getSongListDetails } from 'Api/song'
import { createImageUrl } from 'Utils/utils'
export default {
    name: 'PlistList',
    components: { AppHeader, SongItem },
    props: ['specialid'],
    setup (props) {
        const title = ref('')
        const coverImage = ref('')
        const intro = ref('')
        const list = ref([])

        onBeforeMount(async () => {
            const specialid = props.specialid
            const data = await getSongListDetails(specialid)
            title.value = data.info.list.specialname
            coverImage.value = data.info.list.imgurl
            intro.value = data.info.list.intro
            list.value = data.list.list.info
        })

        return {
            title,
            coverImage,
            intro,
            list,
            createImageUrl
        }
    }
}
</script>

<style lang="scss" scoped>
.cover {
    position: relative;
    display: flex;
    align-items: center;
    height: 240px;
    margin-top: -50px;
    overflow: hidden;
    img {
        width: 100%;
    }
    .rank-info-time {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
        color: #fff;
        line-height: 50px;
        text-indent: 1rem;
    }
}
.list {
    .item {
        .title {
            line-height: 22px;
            .badge {
                padding: 1px 8px;
                background: transparent;
                border: none;
                color: #999;
                margin-right: 5px;
            }
        }
        &:nth-child(1) {
            .title .badge {
                background: #e80000;
                color: #fff;
            }
        }
        &:nth-child(2) {
            .title .badge {
                background: #ff7200;
                color: #fff;
            }
        }
        &:nth-child(3) {
            .title .badge {
                background: #f8b300;
                color: #fff;
            }
        }
    }
}
.item {
    .title {
        line-height: 22px;
        .badge {
            padding: 1px 8px;
            background: transparent;
            border: none;
            color: #999;
        }
    }
}
</style>
